<script>
export default {
    name: "l-number-range",
    props: {
        value: {
            required: true
        },
        startPlaceholder:{
            type:String,
            default:'最小值'
        },
        endPlaceholder:{
            type:String,
            default:'最大值'
        },
    },
    data() {
        return {
            startNumber: null,
            endNumber: null,
        }
    },
    watch: {
        value: {
            immediate: false,
            handler(value) {
                if (this.startNumber !== null && this.startNumber !== "" && this.endNumber !== null && this.endNumber !== "") {
                    this.$emit("change", this.startNumber + "," + this.endNumber)
                }
                if (value === null || value === "") {
                    // 这里要置null，不能置为"",否则会导致 endNumber 为"",而 任意数字都大于"" ,所以 startNumber 的值和 endNumber 一样，为 ""
                    this.startNumber = null
                    this.endNumber = null
                }
                if (value === ",") {
                    console.log('pass');
                    this.$emit("input", null)
                    this.$emit("change", null)
                    // value = null;
                    // this.startNumber = null
                    // this.endNumber = null
                }
            },
        }
    },
    methods: {
        startHandleChange(value) {
            if (isNaN(value) || value === "") {
                // return this.$emit("input", null + "," + this.endNumber)
                return this.$emit("input", "" + "," + this.endNumber)
            }
            // 四舍五入，进行比较
            this.startNumber = Math.round((this.startNumber))
            // 这里 endNumber 若为 null ，startNumber 为正数，就会大于 endNumber ，则被置空，所以要添加 endNumber 不为 null 的判断
            this.startNumber = (this.endNumber !== null && this.startNumber > this.endNumber) ? this.endNumber : this.startNumber;
            this.$emit("input", this.startNumber + "," + this.endNumber)
        },
        endHandleChange(value) {
            if (isNaN(value) || value === "") {
                // return this.$emit("input", this.startNumber + "," + null)
                return this.$emit("input", this.startNumber + "," + "")
            }
            this.endNumber = Math.round((this.endNumber))
            this.endNumber = this.startNumber > this.endNumber ? this.startNumber : this.endNumber
            this.$emit("input", this.startNumber + "," + this.endNumber)
        },
    }
}
</script>

<template>
    <div class="number-container">
        <el-input size="mini" type="number" class="number-start" :placeholder="startPlaceholder" v-model="startNumber" @change="startHandleChange"></el-input>
        <div class="to">至</div>
        <el-input size="mini" type="number" class="number-end" :placeholder="endPlaceholder" v-model="endNumber" @change="endHandleChange"></el-input>

    </div>
</template>

<style scoped lang='scss'>
.number-container {
    display: flex;
    align-items: center;

    .to {
        margin: 0 4px;
    }
}
</style>